<template>
  <section class="app-inner">
    <div class="inner-left">
      <type-tree ref="deviceTree" @deviceClick="deviceClick" @init="init"></type-tree>
    </div>
    <div class="inner-right">
      <div v-if="this.videoPopShow && device.length !== 0">
        <div class="deviceInfo">
          <div class="table-title" @click="basicClick">设备属性</div>
          <table v-show="basicParams" class="device-table">
            <tr v-for="(item, index) in checkedDevice" :key="index">
              <td>{{ item.key }}</td>
              <td class="value-td">{{ item.value }}</td>
            </tr>
          </table>
        </div>
        <div class="deviceInfo">
          <div class="table-title" @click="() => (extendParams = !extendParams)">扩展属性</div>
          <table v-show="extendParams" class="device-table">
            <tr v-for="(item, index) in extendList" :key="index">
              <td>{{ item.key }}</td>
              <td class="value-td">{{ item.value }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="floor-map-content">
      <div class="inner-center">
        <div class="activeFloor">
          <el-form :inline="true" :model="formBuild" label-width="80px" class="form-inline">
            <el-row>
              <!-- <el-col :span="12">
            <el-form-item label="设备类型">
              <el-select
                class="cus-item-width"
                v-model="formBuild.eqptTypeId"
                placeholder="请选择设备类型"
                @change="deviceTypeChange"
              >
                <el-option
                  v-for="item in deviceTypeList"
                  :key="item.eqptTypeId"
                  :label="item.eqptType"
                  :value="item.eqptTypeId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
              <el-col>
                <el-form-item label="楼栋">
                  <el-select class="cus-item-width" v-model="formBuild.build" placeholder="请选择">
                    <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs v-model="activeTabIndex" stretch @tab-click="tabFloor">
            <el-tab-pane v-for="item in floorList" :key="item.id" :label="item.name"> </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="floor-map">
        <canvas class="floorMap" ref="floorMapRef" :width="mapWidth" :height="mapHeight"></canvas>
        <canvas class="floorMap floorMap2" ref="floorMapRef2" :width="mapWidth" :height="mapHeight"></canvas>
        <canvas class="floorMap floorMap3" ref="floorMapRef3" :width="mapWidth" :height="mapHeight"></canvas>
      </div>
    </div>
  </section>
</template>

<script>
import zrender from 'zrender'
import { getEquipmentList, getEqptTitle } from '@/views/children/safety/js/device'
import { floorData, getListByTag } from '@/views/children/safety/js/floor'
// import { videoPlayer } from 'vue-video-player'
// import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
// import 'videojs-contrib-hls'
// import 'video.js/dist/lang/zh-CN'
import { deviceListHead, deviceMaintainHead, deviceIcon } from '@/views/children/safety/js/constants'
import { createBackground } from '@/views/children/safety/js/canvas'

import TypeTree from './components/TypeTree'

export default {
  name: 'DeviceMaintain',
  data () {
    return {
      zr: '',
      zr2: '',
      zr3: '',
      mapWidth: 1200,
      mapHeight: 600,
      floorData: floorData,
      videoPopShow: false,
      deviceDetailShow: false,
      activeTabIndex: 0,
      deviceList: [],
      deviceListHead, // 基本信息表头
      deviceMaintainHead, // 维保表头
      device: [], // 被选中的设备
      deviceIcon,
      videoOption: {
        autoplay: true,
        muted: true,
        language: 'zh-CN',
        preload: 'auto',
        fluid: true,
        aspectRatio: '16:9',
        sources: [
          {
            withCredentials: false,
            type: 'application/x-mpegURL',
            src: '#'
          }
        ],
        controlBar: {
          volumePanel: {
            inline: false // 默认是true,横着的
          },
          progressControl: false, // 进度条
          timeDivider: false, // 当前时间和持续时间的分隔符
          durationDisplay: false, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 全屏按钮
        }
      },
      formBuild: {
        eqptTypeId: '',
        build: ''
      },
      buildList: [],
      floorList: [],
      floorAreaList: [],
      roomList: [],
      activeSpotId: '', // 激活的设备点id
      activeFloorId: '', // 激活的楼层id
      extendList: [], // 扩展字段列表
      basicParams: true,
      extendParams: true,
      deviceTypeList: []
    }
  },
  components: {
    // videoPlayer,
    TypeTree
  },
  computed: {
    checkedDevice () {
      let temp = []
      this.deviceListHead.forEach(item2 => {
        for (var key in this.device) {
          let tempObj = {
            key: '',
            value: ''
          }
          if (item2.value === key) {
            tempObj.key = item2.label
            tempObj.value = this.device[key]
            temp.push(tempObj)
          }
        }
      })
      return temp
    },
    checkedDeviceMaintain () {
      let temp = []
      this.deviceMaintainHead.forEach(item2 => {
        for (var key in this.device) {
          let tempObj = {
            key: '',
            value: ''
          }
          if (item2.value === key) {
            tempObj.key = item2.label
            tempObj.value = this.device[key]
            temp.push(tempObj)
          }
        }
      })
      return temp
    }
  },
  created () {
    // this.getAppEqptTypeList()
  },
  mounted () {
    this.getListByTag(0, 1, 'buildList')
  },
  watch: {
    'formBuild.build' (val) {
      if (val) {
        this.getListByTag(val, 2, 'floorList')
      }
    }
  },
  methods: {
    // 取第一个设备类型
    init (val) {
      this.formBuild.eqptTypeId = val.id
    },
    // // 获取设备类型
    // async getAppEqptTypeList() {
    //   const res = await getAppEqptTypeList()
    //   if (res.code === 0) {
    //     this.deviceTypeList = res.data
    //     if (res.data.length) {
    //       this.formBuild.eqptTypeId = res.data[0].eqptTypeId
    //     }
    //   } else {
    //     this.$message.warning(res.msg)
    //   }
    // },

    // 左侧设备选择回调
    deviceClick (val) {
      const { buildId, floorId, eqptTypeId } = val
      this.activeSpotId = val.eqptId
      this.getEqptTitle(val)
      this.videoPopShow = true
      this.device = val
      this.formBuild.eqptTypeId = eqptTypeId
      if (!buildId || !floorId) {
        this.activeSpotId = ''
        this.creatSpot()
        return false
      }
      // 勾选后重新绘制点
      this.activeFloorId = floorId
      if (+this.formBuild.build === +buildId) {
        // if (!floorId) return false
        // let index = String(this.floorList.findIndex(e => e.id == +this.activeFloorId))
        // if (this.activeTabIndex === index) {
        //   this.creatSpot()
        // } else {
        //   this.getListByTag(buildId, 2, 'floorList')
        // }
        this.getListByTag(buildId, 2, 'floorList')
      } else {
        this.formBuild.build = +val.buildId
      }
    },
    // 获取楼层信息
    async getListByTag (parentId, tag, arr) {
      const params = {
        parentId,
        tag
      }
      const { data } = await getListByTag(params)
      this[arr] = data
      if (tag === 1) {
        // let id = data[0].id
        this.formBuild.build = data[0].id
      }
      if (tag === 2) {
        if (this.activeFloorId) {
          let tempIndex = String(this.floorList.findIndex(e => e.id === +this.activeFloorId))
          if (tempIndex === -1) {
            this.creatSpot()
            return false
          }
          this.activeTabIndex = tempIndex
          this.getEquipmentList(data[this.activeTabIndex].id)
          // this.activeTabIndex = String(this.floorList.findIndex(e => e.id === +this.activeFloorId))
          // this.getEquipmentList(data[this.activeTabIndex].id)
        } else {
          this.activeFloorId = this.floorList[0].id
          this.activeTabIndex = '0'
          if (this.floorList.length) this.getEquipmentList(data[0].id)
        }
        this.drawMap()
      }
    },
    // 获取设备信息
    async getEquipmentList (id) {
      const params = {
        current: 1,
        pageSize: 1000,
        floorId: id,
        eqptTypeId: this.formBuild.eqptTypeId,
        tenantNo: JSON.parse(localStorage.getItem('Visual__User__Info')).tenantNo
      }
      const { data } = await getEquipmentList(params)
      this.deviceList = data.records
      // this.creatDot()
      this.creatSpot()
    },
    tabFloor () {
      this.device = []
      this.deviceList = []
      this.getEquipmentList(this.floorList[this.activeTabIndex].id)
      this.drawMap()
      // this.creatDot()
      this.videoPopShow = false
    },
    showDetail () {
      this.deviceDetailShow = !this.deviceDetailShow
    },
    // 地图
    drawMap () {
      this.zr = zrender.init(this.$refs.floorMapRef)
      this.zr2 = zrender.init(this.$refs.floorMapRef2)
      this.zr3 = zrender.init(this.$refs.floorMapRef3)
      this.zr.clear()
      this.zr2.clear()
      this.zr3.clear()
      this.floorList.forEach((item, index, arr) => {
        if (+this.activeTabIndex === index) {
          this.zr.add(createBackground(item.mapUrl, this.mapWidth, this.mapHeight))
          if (index > 0) {
            this.zr2.add(createBackground(arr[index - 1].mapUrl, this.mapWidth, this.mapHeight))
          }
          if (index > 1) {
            this.zr3.add(createBackground(arr[index - 2].mapUrl, this.mapWidth, this.mapHeight))
          }
        }
      })
    },
    // 创建当前楼层的巡更点
    creatSpot () {
      if (this.deviceList.length) {
        this.deviceList.forEach(e => {
          if (e.mapX && e.mapY) {
            this.drawCircle(this.mapWidth * e.mapX, this.mapHeight * e.mapY, e)
          }
        })
      }
    },
    // 绘制圆
    drawCircle (x, y, obj) {
      let circle = new zrender.Circle({
        shape: {
          cx: x,
          cy: y,
          r: 16
        },
        data: { spotId: obj.eqptName },
        style: {
          fill: this.getColor(obj),
          // fill: '#7ed321', // #7ed321 #1890ff
          text: obj.eqptName.split('')[0],
          fontSize: '12',
          textFill: '#ffffff'
        }
      })
      circle.on('click', () => {
        this.activeSpotId = obj.eqptId
        this.creatSpot()
        this.getEqptTitle(obj)
        this.videoPopShow = true
        // this.videoOption.sources[0].src = obj.eqptHls
        this.device = obj
      })
      this.zr.add(circle)
    },
    getColor (obj) {
      if (obj.eqptId === this.activeSpotId) {
        return '#409eff'
      }
      return '#7ed321'
    },
    async getEqptTitle (obj) {
      let params = {
        eqptTypeId: obj.eqptTypeId
      }
      let { data } = await getEqptTitle(params)
      this.extendList = []
      data.forEach(e => {
        if (e.displayFlag === '1') {
          this.extendList.push({
            key: e.cloumnChn,
            value: obj[e.cloumnKey]
          })
        }
      })
    },

    // 设备类型改变
    deviceTypeChange () {
      this.getEquipmentList(this.floorList[this.activeTabIndex].id)
    },

    // 视频弹窗显示
    showVideoPop (item, e) {
      this.device.left = e.event.pageX - 220 + 'px'
      this.device.top = e.event.pageX - 450 + 'px'
      this.videoOption.sources[0].src = this.device.eqptHls
      this.videoPopShow = !this.videoPopShow
    },
    basicClick () {
      this.basicParams = !this.basicParams
    },
    closeVideo () {
      this.videoPopShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  height: 100%;
  position: relative;
  .cus-item-width {
    width: 150px;
  }
  .video-pop {
    position: absolute;
    z-index: 999;
  }
  .inner-left {
    width: 3rem;
    height: 9rem;
    overflow: hidden;
    background: #ffffff;
    float: left;
    position: absolute;
    z-index: 999;
  }
  /deep/ .el-tabs__item {
    color: #999999;
  }
  /deep/ .el-tabs__item.is-active {
    font-size: 0.18rem !important;
    color: #1ae1e6;
  }
  .inner-right {
    width: 3.4rem;
    height: 9.6rem;
    float: right;
    right: 0;
    position: absolute;
    z-index: 999;
    box-sizing: border-box;
    .deviceInfo {
      width: 100%;
      padding: 0.1rem;
      background: #ffffff;
      box-sizing: border-box;
      .detail-info {
        cursor: pointer;
        text-align: center;
        margin: 0.1rem auto;
        height: 30px;
        background: #f1f3f8;
        line-height: 30px;
        border-radius: 5px;
        color: #565682;
      }
      .table-title {
        text-align: center;
        margin-bottom: 0.1rem;
        height: 25px;
        background: #e6f1fc;
        border: 1px solid #a3d0fd;
        color: #2a71ed;
        line-height: 25px;
        cursor: pointer;
      }
      .device-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0.05rem auto;
        word-wrap: break-word;
        word-break: break-all;
        :last-child td {
          border: none;
        }
        tr {
          :last-child {
            text-align: right;
            color: #6f6f8c;
            width: 1.8rem;
          }
          td {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            font-size: 0.14rem;
            color: #9191af;
            height: 35px;
            line-height: 35px;
          }
        }
      }
    }
    .info-second {
      margin-top: 0.1rem;
    }
    /deep/ .vjs-big-play-button {
      font-size: 2em;
    }
  }
  // }
  .floor-map-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .inner-center {
      // height: 100px;
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-direction: column;
      .activeFloor {
        width: 8rem;
        min-width: 450px;
        display: flex;
        justify-content: space-between;
        .form-inline {
          width: 8rem;
          .el-form-item {
            display: flex;
            .el-form-item__content {
              flex: 1;
            }
          }
        }
        .el-tabs {
          width: 6rem;
        }
        // width: 5rem;
        // margin-bottom: 0.4rem;
      }
    }
    .floor-map {
      // width: 100%;
      // height: 100%;
      // position: relative;
      // left: 50%;
      // margin-left: -700px;
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      .floorMap {
        // top: 1rem;
        position: absolute;
        z-index: 50;
        transform: perspective(50px) rotateX(1deg);
      }
      .floorMap2 {
        top: 0.7rem;
        z-index: 20;
        opacity: 0.5;
      }
      .floorMap3 {
        top: 1.2rem;
        z-index: 0;
        opacity: 0.1;
      }
    }
  }
  .handle-img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    margin: 8px;
    img {
      margin: 3px;
      cursor: pointer;
    }
  }
}
</style>
